<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>可编辑表格(editGrid)</title>
    <!-- 必选，编辑表格样式 -->
    <link rel="stylesheet" href="css/editGrid.css" type="text/css"/>
    <!-- 可选，需要验证时加入 -->
    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
    <!-- 可选，需要日期时加入 -->
    <link rel="stylesheet" href="plugin/My97DatePicker/skin/WdatePicker.css" type="text/css"/>

    <script src="plugin/jquery-1.7.2.js" type="text/javascript"></script>
    <!-- 可选，需要拖拽功能时加入 -->
    <script src="plugin/jquery.dragsort-0.5.2.js" type="text/javascript" charset="utf-8"></script>
    <!-- 可选，需要验证功能时加入 -->
    <script src="plugin/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
    <script src="plugin/jquery.validationEngine-zh_CN.js" type="text/javascript" charset="utf-8"></script>

    <!-- 可选，自定义插件，my97日期控件-->
    <script src="plugin/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="plugin/My97DatePicker/duceap.date.js" type="text/javascript" charset="utf-8"></script>

    <!-- 必选，编辑表格主函数 -->
    <script src="js/yrm.editGrid.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<script  type="text/javascript">
    var gridData=[
        {"id":"1","header":"0","name":"泣血嫣然","guild":"Blizzard","sex":"0","onLine":"0",
            "career":"D","joinTime":"20141015","racist":"0101","note":"战斗刺杀贼"},
        {"id":"2","header":"0","name":"影入梦","guild":"Blizzard","sex":"0","onLine":"0",
            "career":"J","joinTime":"20150715","racist":"0101","note":"奶骑"},

        {"id":"3","header":"1","name":"吉安娜·普罗德摩尔","guild":"Blizzard","sex":"0","onLine":"0",
            "career":"A","joinTime":"20160413","racist":"0101","note":"我的魔法能击败一切"},
        {"id":"4","header":"0","name":"安度因","guild":"Blizzard","sex":"1","onLine":"0",
            "career":"C","joinTime":"20160413","racist":"0101","note":"心灵控制"},
        {"id":"5","header":"0","name":"古尔丹","guild":"Blizzard","sex":"1","onLine":"0",
            "career":"J","joinTime":"20160413","racist":"0206","note":"你的灵魂将受到折磨"},

        {"id":"6","header":"0","name":"瓦莉拉·萨古纳尔","guild":"Blizzard","sex":"0","onLine":"0",
            "career":"D","joinTime":"20160413","racist":"0203","note":"小心你的背后"},
        {"id":"7","header":"0","name":"玛法里奥·怒风","guild":"Blizzard","sex":"1","onLine":"1",
            "career":"E","joinTime":"20160413","racist":"0102","note":"我是大自然的守护者"},

        {"id":"8","header":"0","name":"萨尔","guild":"Blizzard","sex":"1","onLine":"1",
            "career":"G","joinTime":"20160413","racist":"0206","note":"为了霜狼氏族"},
        {"id":"9","header":"0","name":"雷克萨","guild":"Blizzard","sex":"1","onLine":"1",
            "career":"H","joinTime":"20160413","racist":"0206","note":"你将成为我的猎物"},

        {"id":"10","header":"0","name":"乌瑟尔","guild":"Blizzard","sex":"1","onLine":"0",
            "career":"J","joinTime":"20160413","racist":"0101","note":"圣光赐予我力量"},
        {"id":"11","header":"0","name":"地狱咆哮","guild":"Blizzard","sex":"1","onLine":"0",
            "career":"I","joinTime":"20160413","racist":"0206","note":"为了地狱咆哮"}
    ];
    $(document).ready(function(){

        var gridProps={data:gridData,rowDraggable:true}
        //var gridProps={url:'data/myTeam.json'}
        $("[name='editGrid']").editGrid(gridProps);

    })
</script>

<table name="editGrid" >
    <thead>
        <tr>
            <th param="name:'id',type:'hide'">隐藏列</th>

            <th width="50" param="name:'header',type:'radio'" cmpProps="options:'uncheck:0,check:1'">团长</th>

            <th width="100" param="name:'name',type:'text',class:'validate[required]'">角色名</th>

            <th param="name:'guild',type:'readonly'" >公会</th>

            <th width="80" param="name:'sex',type:'select'" cmpProps="options:'1:男,0:女'">性别</th>

            <th width="120" param="name:'joinTime',type:'duceap.date'"
                cmpProps="dateFmt:'yyyy-MM-dd'">入团时间</th>

            <th width="50" param="name:'onLine',type:'checkbox'" cmpProps="options:'uncheck:0,check:1'">是否在线</th>

            <th param="name:'note',type:'textarea'" >备注</th>
        </tr>
    </thead>
</table>

</body>
</html>